<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的 - 智能洗护中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE',
                        vip: {
                            1: '#CCCCCC',    // 普通会员
                            2: '#22C55E',    // 银卡会员
                            3: '#3B82F6',    // 金卡会员
                            4: '#8B5CF6',    // 铂金会员
                            5: '#F59E0B'     // 钻石会员
                        }
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-active {
                color: #35C2C1;
            }
            .tab-active {
                color: #35C2C1;
                border-color: #35C2C1;
            }
            .card-hover {
                transition: all 0.2s ease;
            }
            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            }
            .progress-bar {
                height: 6px;
                background-color: #EEEEEE;
                border-radius: 3px;
                overflow: hidden;
            }
            .progress-value {
                height: 100%;
                background-color: #35C2C1;
                border-radius: 3px;
            }
            .badge {
                display: inline-block;
                padding: 0.15rem 0.4rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-center items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <div class="text-lg font-bold">我的</div>
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-16">
            <!-- 个人信息卡片 -->
            <div class="bg-gradient-to-r from-primary to-teal-400 text-white p-6 relative overflow-hidden">
                
                <div class="relative z-10 flex items-center">
                    <div class="relative">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="w-20 h-20 rounded-full border-2 border-white/50 object-cover">
                      
                    </div>
                    <div class="ml-4">
                        <div class="flex items-center">
                            <h1 class="text-xl font-bold">张小明</h1>
                            <i class="fa fa-check-circle ml-1.5 text-yellow-300"></i>
                        </div>
                        <div class="flex items-center mt-1">
                            <span class="bg-white/20 px-2 py-0.5 rounded-full text-xs font-medium flex items-center">
                                <i class="fa fa-diamond mr-1 text-yellow-300"></i>
                                钻石会员
                            </span>
                            <span class="text-sm ml-2 opacity-90">会员有效期至 2024.12.31</span>
                        </div>
                    </div>
                </div>
                
                
            </div>

            <!-- 我的预约 - 仅显示标签导航 -->
            <div class="mt-4 bg-white p-5">
                <h2 class="text-lg font-bold mb-4">我的预约</h2>
                
                <!-- 预约状态标签 - 图标+文字，点击跳转对应列表页 -->
                <div class="grid grid-cols-2 gap-3">
                    <a href="appointment-list.html" class="flex items-center justify-center p-4 bg-light rounded-lg card-hover">
                        <i class="fa fa-list-ul text-primary mr-2"></i>
                        <span class="font-medium">全部预约</span>
                    </a>
                    <a href="appointment-list.html" class="flex items-center justify-center p-4 bg-light rounded-lg card-hover">
                        <i class="fa fa-clock-o text-primary mr-2"></i>
                        <span class="font-medium">待服务</span>
                    </a>
                    <a href="appointment-list.html" class="flex items-center justify-center p-4 bg-light rounded-lg card-hover">
                        <i class="fa fa-check-circle text-primary mr-2"></i>
                        <span class="font-medium">已完成</span>
                    </a>
                    <a href="appointment-list.html" class="flex items-center justify-center p-4 bg-light rounded-lg card-hover">
                        <i class="fa fa-times-circle text-primary mr-2"></i>
                        <span class="font-medium">已取消</span>
                    </a>
                </div>
            </div>

            <!-- 主要功能区 -->
            <div class="mt-4 bg-white">
                <!-- 权益套餐消费记录 -->
                <div class="border-b border-lightgray">
                    <div class="flex justify-between items-center p-5 cursor-pointer">
                        <div class="flex items-center">
                            <div class="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-credit-card"></i>
                            </div>
                            <span class="font-medium">权益套餐消费记录</span>
                        </div>
                        <i class="fa fa-angle-right text-gray"></i>
                    </div>
                </div>
                
                <!-- 反馈功能 -->
                <div class="border-b border-lightgray">
                    <div class="flex justify-between items-center p-5 cursor-pointer" id="feedbackBtn">
                        <div class="flex items-center">
                            <div class="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-commenting-o"></i>
                            </div>
                            <span class="font-medium">反馈功能</span>
                        </div>
                        <i class="fa fa-angle-right text-gray"></i>
                    </div>
                </div>
                
                <!-- 企业介绍 -->
                <div class="border-b border-lightgray">
                    <div class="flex justify-between items-center p-5 cursor-pointer">
                        <div class="flex items-center">
                            <div class="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-building-o"></i>
                            </div>
                            <span class="font-medium">企业介绍</span>
                        </div>
                        <i class="fa fa-angle-right text-gray"></i>
                    </div>
                </div>
                
                <!-- 联系我们 -->
                <div>
                    <div class="flex justify-between items-center p-5 cursor-pointer">
                        <div class="flex items-center">
                            <div class="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-phone"></i>
                            </div>
                            <span class="font-medium">联系我们</span>
                        </div>
                        <i class="fa fa-angle-right text-gray"></i>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部导航 -->
        <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8">
            <div class="flex justify-between">
                <a href="index.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="store-list.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="my-page.html" class="flex flex-col items-center nav-active">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>

        <!-- 反馈建议模态框 -->
        <div id="feedbackModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4 fade-in">
            <div class="bg-white rounded-lg max-w-md w-full">
                <div class="p-5 border-b border-lightgray flex justify-between items-center">
                    <h3 class="font-bold text-lg">反馈建议</h3>
                    <button id="closeFeedbackModal" class="text-gray">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-5">
                    <p class="text-sm text-gray mb-3">请告诉我们您的宝贵意见，帮助我们改进服务</p>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">反馈类型</label>
                        <div class="grid grid-cols-3 gap-2">
                            <button class="feedback-type-btn py-2 border border-primary bg-primary/10 text-primary rounded text-sm">服务体验</button>
                            <button class="feedback-type-btn py-2 border border-lightgray rounded text-sm">功能建议</button>
                            <button class="feedback-type-btn py-2 border border-lightgray rounded text-sm">其他问题</button>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">反馈内容</label>
                        <textarea 
                            class="w-full border border-lightgray rounded-lg p-3 h-32 text-sm resize-none"
                            placeholder="请详细描述您遇到的问题或建议..."
                        ></textarea>
                        <div class="flex justify-end mt-1">
                            <span class="text-xs text-gray">0/500</span>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-sm font-medium mb-2">上传图片（可选）</label>
                        <div class="flex items-center">
                            <div class="w-16 h-16 border-2 border-dashed border-lightgray rounded-lg flex items-center justify-center text-gray">
                                <i class="fa fa-camera"></i>
                            </div>
                            <span class="text-xs text-gray ml-3">最多上传3张图片</span>
                        </div>
                    </div>
                    
                    <button class="w-full bg-primary text-white py-3 rounded-lg font-medium">
                        提交反馈
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 反馈建议模态框
        document.getElementById('feedbackBtn').addEventListener('click', function() {
            document.getElementById('feedbackModal').classList.remove('hidden');
        });
        
        document.getElementById('closeFeedbackModal').addEventListener('click', function() {
            document.getElementById('feedbackModal').classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        document.getElementById('feedbackModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
            }
        });
        
        // 反馈类型选择
        document.querySelectorAll('.feedback-type-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.feedback-type-btn').forEach(el => {
                    el.classList.remove('border-primary', 'bg-primary/10', 'text-primary');
                    el.classList.add('border-lightgray');
                });
                
                this.classList.remove('border-lightgray');
                this.classList.add('border-primary', 'bg-primary/10', 'text-primary');
            });
        });
        
        // 底部导航交互
        document.querySelectorAll('footer a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('footer a').forEach(el => {
                    el.classList.remove('nav-active');
                    el.classList.add('text-gray');
                });
                this.classList.add('nav-active');
                this.classList.remove('text-gray');
            });
        });
    </script>
</body>
</html>
    